<template>
  <el-config-provider>
    <router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
      <component :is="Layout">
        <KeepAlive :include="keepAliveList">
          <component :is="Component" :key="curRoute.fullPath"></component>
        </KeepAlive>
      </component>
    </router-view>
  </el-config-provider>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { computed, defineAsyncComponent, markRaw } from "vue";
import { useRoute } from "vue-router";
import { useAppStore } from "@/store";

dayjs.locale("zh-cn");

const appStore = useAppStore();
const layouts = new Map();

const keepAliveList = computed(() => {
  return appStore.tabs.map((item) => {
    return item.name;
  });
});

function getLayout(name: string) {
  if (layouts.get(name)) return layouts.get(name);
  const layout = markRaw(
    defineAsyncComponent(() => import(`@/layouts/${name}/index.vue`)),
  );
  layouts.set(name, layout);
  return layout;
}

const route = useRoute();

const Layout = computed(() => {
  if (!route.matched?.length) return null;
  return getLayout((route.meta?.layout as string) || "normal");
});
</script>
